<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*,java.text.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>排班</title>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="echart/jquery-1.9.1.min.js"></script>
<style type="text/css">
.left {
    float: left;
    width: 20%;
    background-color: #FFFFFF;
}
.right {
    margin-left: 20%;
    width:80%;
    background-color: #B0E2FF;
}
select{
	width:100%;
	height:50px;
	text-align: center;	
	text-align-last: center;
	font-size:16px;
}
#tlw,#ttw,#tnw tr{
	height:50px;
}
</style>
</head>
<% 
Date now = new Date();
String today = new SimpleDateFormat("yyyy-MM-dd").format(now);

List<String> days = new ArrayList<String>();
Calendar cal=Calendar.getInstance();
cal.add(Calendar.WEEK_OF_MONTH, 0);
cal.set(Calendar.DAY_OF_WEEK, 2);
cal.set(Calendar.DATE, cal.get(Calendar.DATE) -8);
for(int i=0;i<21;i++){
	cal.set(Calendar.DATE, cal.get(Calendar.DATE)+1);
	Date time=cal.getTime();
	String d = new SimpleDateFormat("yyyy-MM-dd").format(time);
	days.add(d);
}
request.setAttribute("days",days);
%>
<body>
<div class="left">
<table border="1" cellspacing="0" width="100%">
	<tr><td align="center" id="lw">上周</td></tr>
	<tr><td align="center" id="tw">本周</td></tr>
	<tr><td align="center" id="nw">下周</td></tr>
</table>
<%-- <br>
<br>
<select id="ks">
	<c:forEach items="${depts}" var="dept">
		<option value="${dept.ksdm}" >${dept.ksmc}</option>
	</c:forEach>
</select> --%>
</div>
<div class="right" >
<table border="1" cellspacing="0" width="100%" >
	<tr>
		<td align="center">姓名</td>
		<td id="w1" align="center">星期一</td>
		<td id="w2" align="center">星期二</td>
		<td id="w3" align="center">星期三</td>
		<td id="w4" align="center">星期四</td>
		<td id="w5" align="center">星期五</td>
		<td id="w6" align="center">星期六</td>
		<td id="w7" align="center">星期天</td>
	</tr>
	<tbody class="tlw">
		<c:forEach items="${nurses}" var="nurse">
		<tr>
			<td align="center">${nurse.xm}</td>
			<c:forEach items="${days}" var="d" begin="0" end="6">
				<td>
				<select disabled>
					<option value="" <c:if test="${nurse[d]==null}">selected</c:if>>空</option>
					<option value="00:00-00:00" <c:if test="${nurse[d]=='00:00-00:00'}">selected</c:if>>休息</option>
					<option <c:if test="${nurse[d]=='08:00-20:00'}">selected</c:if>>08:00-20:00</option>
					<option <c:if test="${nurse[d]=='08:00-17:00'}">selected</c:if>>08:00-17:00</option>
					<option <c:if test="${nurse[d]=='07:00-19:00'}">selected</c:if>>07:00-19:00</option>
					<option <c:if test="${nurse[d]=='20:00-08:00'}">selected</c:if>>20:00-08:00</option>
					<option <c:if test="${nurse[d]=='19:00-07:00'}">selected</c:if>>19:00-07:00</option>	
				</select>
				</td>
			</c:forEach>
		</tr>
	</c:forEach>
	</tbody>
	<c:set var="nowDate" value="<%=today %>"></c:set>
	<tbody class="ttw">
		<c:forEach items="${nurses}" var="nurse">
		<tr>
			<td align="center">${nurse.xm}</td>
			<c:forEach items="${days}" var="d" begin="7" end="13">
				<td>
				<select <c:if test="${d<=nowDate}">disabled</c:if> id="${nurse.ygdm}_${d}" class="sc">
					<option value="" <c:if test="${nurse[d]==null}">selected</c:if>>空</option>
					<option value="00:00-00:00" <c:if test="${nurse[d]=='00:00-00:00'}">selected</c:if>>休息</option>
					<option <c:if test="${nurse[d]=='08:00-20:00'}">selected</c:if>>08:00-20:00</option>
					<option <c:if test="${nurse[d]=='08:00-17:00'}">selected</c:if>>08:00-17:00</option>
					<option <c:if test="${nurse[d]=='07:00-19:00'}">selected</c:if>>07:00-19:00</option>
					<option <c:if test="${nurse[d]=='20:00-08:00'}">selected</c:if>>20:00-08:00</option>
					<option <c:if test="${nurse[d]=='19:00-07:00'}">selected</c:if>>19:00-07:00</option>	
				</select>
				</td>
			</c:forEach>
		</tr>
	</c:forEach>
	</tbody>
	<tbody class="tnw">
		<c:forEach items="${nurses}" var="nurse">
		<tr>
			<td align="center">${nurse.xm}</td>
			<c:forEach items="${days}" var="d" begin="14" end="20">
				<td>
				<select id="${nurse.ygdm}_${d}" class="sc">
					<option value="" <c:if test="${nurse[d]==null}">selected</c:if>>空</option>
					<option value="00:00-00:00" <c:if test="${nurse[d]=='00:00-00:00'}">selected</c:if>>休息</option>
					<option <c:if test="${nurse[d]=='08:00-20:00'}">selected</c:if>>08:00-20:00</option>
					<option <c:if test="${nurse[d]=='08:00-17:00'}">selected</c:if>>08:00-17:00</option>
					<option <c:if test="${nurse[d]=='07:00-19:00'}">selected</c:if>>07:00-19:00</option>
					<option <c:if test="${nurse[d]=='20:00-08:00'}">selected</c:if>>20:00-08:00</option>
					<option <c:if test="${nurse[d]=='19:00-07:00'}">selected</c:if>>19:00-07:00</option>	
				</select>
				</td>
			</c:forEach>
		</tr>
	</c:forEach>
	</tbody>
</table>

</div>

<script type="text/javascript">

//#B0E2FF

function getTime(n) {
  var now = new Date();
  var year = now.getFullYear();
  //因为月份是从0开始的,所以获取这个月的月份数要加1才行
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var day = now.getDay();
  //判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
  if (day !== 0) {
    n = n + (day - 1);
  } else {
    n = n + day;
  }
  if (day) {
    //这个判断是为了解决跨年的问题
    if (month > 1) {
      month = month;
    }
    //这个判断是为了解决跨年的问题,月份是从0开始的
    else {
      year = year - 1;
      month = 12;
    }
  }
  now.setDate(now.getDate() - n);
  year = now.getFullYear();
  month = now.getMonth() + 1;
  date = now.getDate();
  // console.log(n);
  var s = year + "-" + (month < 10 ? ('0' + month) : month) + "-" + (date < 10 ? ('0' + date) : date);
  return s;
}
$("#lw").html("上周<br>("+getTime(7)+"至"+getTime(1)+")");
$("#tw").html("本周<br>("+getTime(0)+"至"+getTime(-6)+")");
$("#nw").html("下周<br>("+getTime(-7)+"至"+getTime(-13)+")");
$("#w1").html("星期一<br>"+getTime(0));
$("#w2").html("星期二<br>"+getTime(-1));
$("#w3").html("星期三<br>"+getTime(-2));
$("#w4").html("星期四<br>"+getTime(-3));
$("#w5").html("星期五<br>"+getTime(-4));
$("#w6").html("星期六<br>"+getTime(-5));
$("#w7").html("星期天<br>"+getTime(-6));
$("#tw").css("background","#B0E2FF")
$(".ttw").show();
$(".tlw").hide();
$(".tnw").hide();
$("#lw").click(function(){
	$("#w1").html("星期一<br>"+getTime(7));
	$("#w2").html("星期二<br>"+getTime(6));
	$("#w3").html("星期三<br>"+getTime(5));
	$("#w4").html("星期四<br>"+getTime(4));
	$("#w5").html("星期五<br>"+getTime(3));
	$("#w6").html("星期六<br>"+getTime(2));
	$("#w7").html("星期天<br>"+getTime(1));
	$("#lw").css("background","#B0E2FF")
	$("#tw").css("background","#FFFFFF")
	$("#nw").css("background","#FFFFFF")
	$(".tlw").show();
	$(".ttw").hide();
	$(".tnw").hide();
});
$("#tw").click(function(){
	$("#w1").html("星期一<br>"+getTime(0));
	$("#w2").html("星期二<br>"+getTime(-1));
	$("#w3").html("星期三<br>"+getTime(-2));
	$("#w4").html("星期四<br>"+getTime(-3));
	$("#w5").html("星期五<br>"+getTime(-4));
	$("#w6").html("星期六<br>"+getTime(-5));
	$("#w7").html("星期天<br>"+getTime(-6));
	$("#lw").css("background","#FFFFFF")
	$("#tw").css("background","#B0E2FF")
	$("#nw").css("background","#FFFFFF")
	$(".tlw").hide();
	$(".ttw").show();
	$(".tnw").hide();
});
$("#nw").click(function(){
	$("#w1").html("星期一<br>"+getTime(-7));
	$("#w2").html("星期二<br>"+getTime(-8));
	$("#w3").html("星期三<br>"+getTime(-9));
	$("#w4").html("星期四<br>"+getTime(-10));
	$("#w5").html("星期五<br>"+getTime(-11));
	$("#w6").html("星期六<br>"+getTime(-12));
	$("#w7").html("星期天<br>"+getTime(-13));
	$("#lw").css("background","#FFFFFF")
	$("#tw").css("background","#FFFFFF")
	$("#nw").css("background","#B0E2FF")
	$(".tlw").hide();
	$(".ttw").hide();
	$(".tnw").show();
});
$(".sc").change(function(){
	var info =  $(this).attr("id");
	$.post("ScheduleUpdate",
			{
			ygdm:info.split("_")[0],
			pbrq:info.split("_")[1],
			rq:$(this).val()
			}
			,function(data,status){
		        if(status=='success'){
		        }
    });
});
/* $("div[class='right']").hide();
$("div[class='right']").eq(0).show();
$("#ks").change(function(){
	$("div[class='right']").hide();
	console.log("#div"+$(this).val());
	$("#div"+$(this).val()).show();
	
}); */
</script>
</body>
</html>